﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
    <div class="layer">
        <div>
            <div class="i" id=""></div>
        </div>
    </div>
    <div class="box">
        <div class="box1">
            <h3 class="logo">注册</h3>
            <form action="/api/admin" method="post">
                <table align="center">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="admin" class="input"></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="password" class="input"></td>
                    </tr>
                </table>
                <p class="denglu" align="center"><input type="submit"><a href="~/admin">登录</a></p>

            </form>
        </div>
    </div>
</body>

</html>
<script src="~/js/jquery-3.6.0.min.js"></script>
<script>
    const inputs = document.querySelectorAll(".input")

    function addcl() {
        let parent = this.parentNode.parentNode;
        parent.classList.add("focus")
    }

    function remcl() {
        let parent = this.parentNode.parentNode;
        if (this.value === "") {
            parent.classList.remove("focus")
        }
    }

    inputs.forEach(input => {
        input.addEventListener("focus", addcl);
        input.addEventListener("blur", remcl);
    })
    // dom操作
    // 选择元素
    var layer = $('.layer');
    var layer_info = $('.layer div div');

    // 请求部分
    // 注册
    $('.btn').click(function () {
        var info = $('form input');
        // 获取账号密码
        $.ajax({
            type: 'POST',
            url: '/api/admin',
            data: {
                'AdminName': info[0].value,
                'AdminPassword': info[1].value,
            },
            success: function (data) {
                console.log(data);
                console.log(typeof (data));
                console.log(data.status);
                if (data.status == "error") {
                    layer_info.attr('id', 'error');
                    layer_info.append(`<i class="fas fa-tired"><span> 注册失败：${data.data}</span></i>`);
                    layer.fadeIn(600);
                    setTimeout(function () { layer.fadeOut(450); }, 1500);
                    // 清楚layer_info的id和内容
                    setTimeout(() => { layer_info.removeAttr('id'); layer_info.empty(); }, 3000);
                    return null;
                }
                layer_info.attr('id', 'success');
                layer_info.append('<i class="fas fa-smile"><span> 注册成功</span></i>');
                layer.fadeIn(600);
                setTimeout(function () { layer.fadeOut(450); }, 1500);
                setTimeout(function () { window.location.href = '/Admin'; }, 1500);
            },
            error: function (err) {
                console.log(err.responseText);
                // 失败
                layer_info.attr('id', 'error');
                errorMessage = err.responseText.match(/[\u4e00-\u9fa5]+/g);
                layer_info.append(`<i class="fas fa-tired"><span> 注册失败：${errorMessage}</span></i>`);
                layer.fadeIn(600);
                setTimeout(function () { layer.fadeOut(450); }, 1500);
                // 清楚layer_info的id和内容
                setTimeout(() => { layer_info.removeAttr('id'); layer_info.empty(); }, 3000);
            }
        });
        $('input').val('');
    });
</script>